import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {getQueryString} from '../utils/util';

import { Modal } from 'antd-mobile';

import '../static/styles/detail.css';

import 'antd-mobile/lib/modal/style/index.css';

class Imgs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modal1:true,
            showMask: false,
            showImg:''
        }
    }

    componentDidMount() {
        document.title = '美图集锦';
    }

    onClose(){
        this.setState({
            showMask:false,
        });
    }

    showImg(){
        this.setState({
            showMask:true,
        });
    }

    render() {
        return (<div>
            <div className='p22 mtjj'>
                <img onClick={() => this.showImg()} src={require('../static/imgs/mtjj.jpg')}/>
                <img onClick={() => this.showImg()} src={require('../static/imgs/mtjj.jpg')}/>
                <img onClick={() => this.showImg()} src={require('../static/imgs/mtjj.jpg')}/>
                <img onClick={() => this.showImg()} src={require('../static/imgs/mtjj.jpg')}/>
                <img onClick={() => this.showImg()} src={require('../static/imgs/mtjj.jpg')}/>
                <img onClick={() => this.showImg()} src={require('../static/imgs/mtjj.jpg')}/>
            </div>

            {
                this.state.showMask
                ?
                <div className='alert-item'>
                    <div className='alert-item-mask'>
                        <img src={require('../static/imgs/mtjj.jpg')}/>
                        <img onClick={() => this.onClose()} className='alert-item-close' src={require('../static/imgs/close.png')}/>
                    </div>
                </div>
                :
                ''
            }
        </div>);
    }
}

export default Imgs;
